import { ComponentType } from 'react'
import Taro, { Component, Config } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import FuCell from "@/components/FuCell";
import './index.scss'

type PageStateProps = {
  counterStore: {
    counter: number,
    increment: Function,
    decrement: Function,
    incrementAsync: Function
  }
}

interface Index {
  props: PageStateProps;
}

class Index extends Component {

  /**
   * 指定config的类型声明为: Taro.Config
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */

  state = {
    logo: ""
  }
  config: Config = {
    navigationBarTitleText: 'ForUI',

  }

  componentWillMount() {
    /*  #ifdef  weapp  */
    Taro.showShareMenu({
      withShareTicket: true
    })
  /* #endif */
  }

  componentWillReact() {
    console.log('componentWillReact')
  }

  componentDidMount() { }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  render() {
    const { logo } = this.state;
    return (
      <View className='index'>
        <View className="index-logo">
          <Image src={logo} />
          <View>ForUI</View>
        </View>
        <FuCell title="Button" arrow border onClick={() => {
          Taro.navigateTo({
            url: '/pages/Button/index'
          })
        }} />
        <FuCell title="Cell" arrow border onClick={() => {
          Taro.navigateTo({
            url: '/pages/Cell/index'
          })
        }} />
        <FuCell title="Icon" arrow border onClick={() => {
          Taro.navigateTo({
            url: '/pages/Icon/index'
          })
        }} />
        <FuCell title="Tab" arrow border onClick={() => {
          Taro.navigateTo({
            url: '/pages/Tab/index'
          })
        }} />
        <FuCell title="SwipeCell" arrow border onClick={() => {
          Taro.navigateTo({
            url: '/pages/SwipeCell/index'
          })
        }} />
        <FuCell title="Image" arrow border onClick={() => {
          Taro.navigateTo({
            url: '/pages/Image/index'
          })
        }} />
        <FuCell title="Collapse" arrow border onClick={() => {
          Taro.navigateTo({
            url: '/pages/Collapse/index'
          })
        }} />
        <FuCell title="Input" arrow border onClick={() => {
          Taro.navigateTo({
            url: '/pages/Input/index'
          })
        }} />
        <FuCell title="Radio" arrow border onClick={() => {
          Taro.navigateTo({
            url: '/pages/Radio/index'
          })
        }} />
      </View>
    )
  }
}

export default Index as ComponentType
